<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理器</title>
    <style>
        .completed { text-decoration: line-through; opacity: 0.7; }
        #stats { margin-top: 20px; font-weight: bold; }
        .task-item { margin: 5px 0; padding: 5px; border: 1px solid #ddd; }
        button { margin-left: 10px; }
    </style>
</head>
<body>
    <h2>任务管理器</h2>
    <input type="text" id="taskInput" placeholder="请输入任务">
    <button id="addBtn">添加任务</button>
    <div>
        <label>排序方式：
            <select id="sortSelect">
                <option value="createdDesc">最新在前</option>
                <option value="createdAsc">最早在前</option>
                <option value="textAsc">名称升序</option>
                <option value="textDesc">名称降序</option>
                <option value="uncompleted">未完成优先</option>
            </select>
        </label>
    </div>
    <ul id="taskList"></ul>
    <div id="stats"></div>

    <script>

        const taskInput = document.getElementById("taskInput");
        const addBtn = document.getElementById("addBtn");
        const taskList = document.getElementById("taskList");
        const sortSelect = document.getElementById("sortSelect");
        

        let tasks = JSON.parse(localStorage.getItem('tasks')) || [];


        updateList();

        addBtn.addEventListener("click", addTask);
        

        sortSelect.addEventListener("change", () => {
            sortTasks();
            updateList();
        });


        taskList.addEventListener("click", handleListClick);
        taskList.addEventListener("change", handleCheckbox);

        function addTask() {
            const taskText = taskInput.value.trim();
            if (!taskText) return;

            const newTask = {
                id: Date.now(),
                text: taskText,
                created: new Date(),
                completed: false
            };

            tasks.push(newTask);
            taskInput.value = "";
            sortTasks();
            updateList();
            saveToLocal();
        }

        function handleListClick(e) {
            if (e.target.tagName === "BUTTON") {
                const taskId = parseInt(e.target.dataset.id);
                tasks = tasks.filter(task => task.id !== taskId);
                updateList();
                saveToLocal();
            }
        }

        function handleCheckbox(e) {
            if (e.target.type === "checkbox") {
                const taskId = parseInt(e.target.dataset.id);
                const task = tasks.find(task => task.id === taskId);
                task.completed = e.target.checked;
                updateList();
                saveToLocal();
            }
        }

        function sortTasks() {
            const sortBy = sortSelect.value;
            tasks.sort((a, b) => {
                switch(sortBy) {
                    case 'createdDesc': return b.created - a.created;
                    case 'createdAsc': return a.created - b.created;
                    case 'textAsc': return a.text.localeCompare(b.text);
                    case 'textDesc': return b.text.localeCompare(a.text);
                    case 'uncompleted': return (a.completed - b.completed);
                }
            });
        }

        function updateList() {

            taskList.innerHTML = "";
            
            tasks.forEach(task => {
                const li = document.createElement("li");
                li.className = "task-item";
                li.innerHTML = `
                    <label>
                        <input type="checkbox" 
                            ${task.completed ? "checked" : ""} 
                            data-id="${task.id}">
                        <span class="${task.completed ? "completed" : ""}">${task.text}</span>
                    </label>
                    <small>${task.created.toLocaleString()}</small>
                    <button data-id="${task.id}">删除</button>
                `;
                taskList.appendChild(li);
            });

            updateStats();
        }

        function updateStats() {
            const total = tasks.length;
            const completed = tasks.filter(t => t.completed).length;
            const stats = `总任务: ${total} | 已完成: ${completed} | 未完成: ${total - completed}`;
            document.getElementById("stats").textContent = stats;
        }

        function saveToLocal() {
            localStorage.setItem('tasks', JSON.stringify(tasks));
        }
    </script>
</body>
</html>